<template>
    <view class="main" :style="{ paddingBottom: safeAreaInsets + 'px',bottom:vheight+'px'}">
		<view class="labellist" v-if="labelShow">
			<scroll-view scroll-x class="scroll">
				<view v-for="(item,index) in labels" :key="index" class="label-item" :class="{ activelabel: activelabel === index }" @click="handerlabel(item,index)">
					<text style="font-size: 30rpx;">{{item}}</text>
				</view>
			</scroll-view>
		</view>
		
        <view class="btn-group">
            <view v-for="(btn, index) in buttons" :key="index" class="btn" :class="{ active: activeIndex === index }" @click="handleButtonClick(index)">
                <text class="btn-text">{{ btn }}</text>
                  </view>
        </view>
		
	
    </view>
</template>

<script>
export default {
	props:{
		vheight:{
		  type:Number,
		  default:10
		}
	},
    data() {
		
        return {
            safeAreaInsets: 0,
			activelabel:-1,
            activeIndex: -1,
            labelShow: false,
            buttons:['商圈','群组',"人员",'定位'],
		labels:['美食','出行','美容','家政','娱乐','公司']
         
        };
    },
    mounted() {
        this.getSafeArea();
    },
    methods: {
        handleButtonClick(index) {
		 this.activeIndex = this.labelShow ? index : -1;
            if (index === 3) {
				this.$emit("handerBtn",index)
                this.labelShow = false
               
                
            } else {
                this.labelShow = false;
                this.activeIndex = index;
         
            }
			if(index===0){
				this.labelShow=!this.labelShow
				const keytag=""
				this.$emit('shopShow',keytag)
			
			}
			if(index===2){
				this.labelShow=false
				this.$emit("addmarker")
			}
			if(index===1){
				this.labelShow=false
				this.$emit('handerGetGroup')
			}
        },
		handerlabel(item,index){
			this.activelabel=index
			this.$emit('shopShow',item)
		},
        getSafeArea() {
             this.safeAreaInsets = this.$store.state.msg.systemInfo.safeAreaInsets.bottom;
                }
        
        
    }
};
</script>

<style scoped>
.main {
    position: fixed;
    left: 0rpx;
    z-index: 999;
}

.btn-group {
    display: flex;
	flex-direction: row;
	width: 750rpx;
    height: 96rpx;


	align-items: center;
	justify-content: center;
	background-color: #ffffff;
}

.btn {
	margin: 10rpx;
    width: 150rpx;
    height: 80rpx;
    border-radius: 10rpx;
    background-color: #00aaff;
    justify-content: center;
    align-items: center;

}
.scroll{
	display: flex;
	flex-direction: row;
	width: 750rpx;
}
.btn-text {
    color: #ffffff;
    font-size: 26rpx;
}

.active {
    background-color: #ffaa00;
}
.label-item{
	display: flex;
	flex-direction: row;
	margin: 10rpx;
	align-items: center;
	justify-content: center;
	width: 120rpx;
	height: 60rpx;
	border-radius: 20rpx;
	background-color: #ffaa00;
}
.activelabel{
	background-color: #ffffff;
}



</style>    